<template>
	<!-- 本地菜场 -->
	<view id="thisLocality">
		<!-- 头 -->
		<view class="thisLocality_header">
			<!-- 顶部 -->
			<view class="header">
				<!-- 顶部地图定位 -->
				<view class="header_site" bindtap="clickModal">
					<text>智能排序</text>
					<image src="../../static/images/select@2x.png" />
				</view>
				<!-- 顶部搜索框 -->
				<view class="header_input">
					<image src="../../static/images/search@2x.png" />
					<input type="search" placeholder="输入市场、商家、蔬菜" />
				</view>
			</view>
		</view>
		<!-- 身体 -->
		<view class="thisLocality_main">
			<!-- 主体 -->
			<view class="main">
				<!-- 循环的一个框 -->
				<view class="main_box" v-for="(item,id) in mainlist" :key="id" @click="clickMerchantList">
					<!-- 头像 -->
					<view class="main_box_headPortrait">
						<image :src="item.headPortrait" />
					</view>
					<!-- 循环主体 -->
					<view class="main_box_main">
						<!-- 名字 -->
						<view class="main_box_main_name">{{ item.name }}</view>
						<!-- 评星以及评论 -->
						<view class="main_box_main_grade">
							<!-- 评星 -->
							<view class="main_box_main_grade_star">
								<image v-for="(item,index) in item.list":key="index" :src="item" />
							</view>
							<!-- 评论 -->
							<view class="main_box_main_grade_comment">{{ item.comment }}评论</view>
						</view>
						<!-- 标签 -->
						<view class="main_box_main_label">
							<view v-for="(item,index) in item.label" :key="index">{{ item }}</view>
						</view>
					</view>
					<!-- 距离 -->
					<view class="main_box_main_distance">
						<text decode="true">&lt;{{ item.distance }}km</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 模态框 -->
		<view class="modal" style="display:modalBlock" bindtap="clickModal">
			<view class="modal_box">
				<!-- 区县 -->
				<view class="modal_box_county">
					<view>全城</view>
				</view>
				<!-- 当前城市 -->
				<view class="modal_box_city">
					<view>当前城市：<text class="modal_box_city_text">成都</text></view>
					<view>
						<text class="cut">切换</text>
						<image src="../../static/images/cut@2x.png" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mainlist: [{
						id: 0,
						headPortrait: '../../static/images/market_heade_img@2x.png',
						name: '建设路菜市场',
						list: [
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
						],
						label: ['种类多', '干净'],
						comment: 170,
						distance: 2.5,
					},
					{
						id: 1,
						headPortrait: '../../static/images/market_heade_img@2x.png',
						name: '建设路菜市场',
						list: [
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
							'../../static/images/star-halfselected@2x.png',
						],
						label: ['种类多', '干净'],
						comment: 170,
						distance: 2.5,
					},
				],
				modalBlock: 'none', //模态框显示隐藏
			}
		},
		methods: {
			// 点击弹出模态框
			clickModal() {
				// 模态框显示
				if (this.modalBlock == 'none') {
					this.modalBlock = 'block';
				} else {
					this.modalBlock = 'none';
				}
			},
			// 点击跳转商家列表页面
			clickMerchantList() {
				uni.navigateTo({
					url: '../../static/merchantList/merchantList',
				});
			},
		}
	}
</script>

<style lang="less" scoped>
// 头
.thisLocality_header {
  /* 顶部 */
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border-bottom: 2rpx solid #d9d6d9;

    /* site */
    .header_site {
      width: 200rpx;
      padding: 40rpx 0;
      font-size: 28rpx;
      position: relative;
      z-index: 1000;
      background: #fff;
      text-align: center;
      image {
        width: 26rpx;
        height: 14rpx;
        margin-left: 26rpx;
      }
    }
    /* 定位 */
    .header_location {
      width: 120rpx;
      text-align: center;
      image {
        width: 39rpx;
        height: 48rpx;
      }
    }
    /* 搜索框 */
    .header_input {
      flex: 1;
      position: relative;
      padding: 0 12rpx;
      margin: 28rpx 0;
      image {
        width: 40rpx;
        height: 40rpx;
        position: absolute;
        left: 32rpx;
        top: 50%;
        margin-top: -20rpx;
      }
      input {
        border: none;
        background: #e5e5e5;
        border-radius: 32rpx;
        height: 64rpx;
        padding-left: 72rpx;
        font-size: 24rpx;
      }
    }
  }
}
// 身体
.thisLocality_main {
  background: #fff;
  /* 主体 */
  /* 循环的框 */
  .main_box {
    height: 240rpx;
    display: flex;
    box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.1);
    font-size: 24rpx;
    /* 头像 */
    .main_box_headPortrait {
      padding: 20rpx;
      image {
        width: 200rpx;
        height: 200rpx;
      }
    }
    /* 循环主体 */
    .main_box_main {
      flex: 1;
      // 名字
      .main_box_main_name {
        font-size: 32rpx;
        font-weight: bold;
        line-height: 44rpx;
        padding-top: 40rpx;
      }
      // 评星以及评论
      .main_box_main_grade {
        display: flex;
        align-items: center;
        /* 主体内的评星 */
        .main_box_main_grade_star {
          image {
            width: 40rpx;
            height: 40rpx;
            vertical-align: middle;
          }
        }
        .main_box_main_grade_comment {
          margin-left: 20rpx;
          width: 100rpx;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      // 标签
      .main_box_main_label {
        display: flex;
        view {
          display: inline-block;
          font-size: 24rpx;
          color: #ff6633;
          border-radius: 24rpx;
          background: rgba(255, 102, 51, 0.1);
          padding: 0 20rpx;
          margin: 24rpx 12rpx 0 0;
          line-height: 40rpx;
        }
      }
    }
    /* 距离 */
    .main_box_main_distance {
      width: 110rpx;
      display: flex;
      align-items: flex-end;
      padding-bottom: 40rpx;
    }
  }
}

/* 模态框 */
.modal {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  z-index: 999;
  .modal_box {
    background: #fff;
    margin-top: 120rpx;
    padding: 20rpx 0;
    /* 区县 */
    .modal_box_county {
      display: flex;
      flex-wrap: wrap;
      view {
        border: 2rpx solid #707070;
        border-radius: 10rpx;
        width: 29%;
        line-height: 72rpx;
        text-align: center;
        margin: 0 0 20rpx 20rpx;
      }
    }
    /* 当前城市 */
    .modal_box_city {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 72rpx;
      padding: 0 20rpx;
      margin: 0 20rpx;
      border: 2rpx solid #707070;
      border-radius: 10rpx;
      font-size: 34rpx;
      .modal_box_city_text {
        color: #363336;
        font-weight: bold;
      }
      .cut {
        vertical-align: middle;
      }
      image {
        width: 14rpx;
        height: 26rpx;
        vertical-align: middle;
        margin-left: 24rpx;
      }
    }
  }
}
</style>
